import { useState } from "react";
import { Segmented } from "antd";
import { ComponentAttr } from "./ComponentAttr";
import { ComponentStyle } from "./ComponentStyle";
import { ComponentEvent } from "./ComponentEvent";

import { useComponentsStore } from "../../stores/components";

export function Setting() {
    const [key, setKey] = useState<'属性' | '样式' | '事件'>('属性');

    const { curComponentId } = useComponentsStore();
    if(!curComponentId) return null;
        
    return <div>
        <Segmented value={key} options={['属性','样式','事件']} block onChange={setKey}></Segmented>
        <div className="pt-[20px]">
            { key === '属性' && <ComponentAttr />  }
            { key === '样式' && <ComponentStyle />  }
            { key === '事件' && <ComponentEvent />  }
        </div>
    </div>
}